<template>
	<view class="page_box">
		<!-- <canvas class="share_qrcode" :size='120' canvas-id="qrcode"/> -->
		<view class="ikon1">
			<image src="/static/img/agant2.png" mode=""></image>
		</view>
		<view class="ikon2">
			<image src="/static/img/agent1.png" mode=""></image>
		</view>
		<view class="agant_textarea">
			<view class="" style="margin-bottom: 30rpx;" v-html="agent.agent_text"></view>
			<!-- <view class="">代理人15%收益返还，活动期间限时奖励3元！</view> -->
		</view>
		<view class="agant_btn copy_btn" @tap="copyText">一键复制文案</view>
		<view class="agant_btn share_btn" @tap="toggleShare(true)">邀请好友</view>
		<view class="agant_modal" v-if="shareModal" @touchmove.stop.prevent="preventHandler">
			<view class="share_bg_box">
				<image @tap="toggleShare(false)" class="share_close" src="/static/img/share_close.png" mode=""></image>
				<canvas class="share_canvas" style="" canvas-id="firstCanvas"></canvas>
			</view>
			<view class="share_list flexRow">
				<view class="share_list_item flexCol" @tap="share_weixin('WXSenceTimeline')">
					<image src="/static/img/pyq.png" mode=""></image>
					<text>朋友圈</text>
				</view>
				<view class="share_list_item flexCol" @tap="share_weixin('WXSceneSession')">
					<image src="/static/img/vx.png" mode=""></image>
					<text>微信</text>
				</view>
				<view class="share_list_item flexCol">
					<image src="/static/img/qq.png" mode=""></image>
					<text>QQ</text>
				</view>
				<view class="share_list_item flexCol">
					<image src="/static/img/sj.png" mode="" @tap="getauth"></image>
					<text>保存到手机</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	// import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	// import permision from "@/js_sdk/wa-permission/permission.js"
	import request from '../../apiRequest/request.js'
	export default {
		data() {
			return {
				shareModal: false,
				qrcodeSrc: '',
				shareImgSrc: '',
				user: {},
				agent: {}
			}
		},
		onShow() {
			request.userInfo(false).then(res=>{
				console.log(res)
				this.user = res.data.userInfo;
				this.agent = res.data.agent;
				
			}).catch(err=>{
				this.$unexpected(err)
			})
		},
		methods: {
			copyText(){
				uni.setClipboardData({
				    data: this.agent.agent_text,
				    success: function () {
				        console.log('success');
				    }
				});
			},
			preventHandler(){
				return
			},
			share_weixin(scene){
				let that = this;
				uni.showLoading({
				  title: '',
				  mask: true
				})
				uni.canvasToTempFilePath({
				  destWidth: 610,
				  destHeight: 712,
				  canvasId: 'firstCanvas',
				  success(res) {
					uni.hideLoading()
				    console.log(res.tempFilePath)
					uni.share({
					    provider: "weixin",
					    scene: scene,
					    type: 2,
					    summary: "我正在使用爱点赞做任务赚钱，赶紧跟我一起来体验！",
						imageUrl: res.tempFilePath,
					    success: function (data) {
							that.toggleShare(false)
					        console.log("success:" + JSON.stringify(data));
					    },
					    fail: function (err) {
							that.toggleShare(false)
							uni.showToast({
							    title: '分享失败',
								icon: 'none',
							    duration: 2000
							})
					        console.log("fail:" + JSON.stringify(err));
					    }
					})
				  }
				})
				
			},
			toggleShare(bool){
				this.shareModal = bool
				if(bool){
					/*canvas依赖父元素宽高，延时确保父元素 先 生成宽高*/
					//#ifdef APP-PLUS
					let time = setTimeout(()=>{this.createCanvas()},300)
					//#endif
				}
			},
			make() {
				let that = this;
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.agent.invite_url,
					size: 120,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.defaults.correctLevel,
					success: res => {
						that.qrcodeSrc = res
						console.log(res)
					}
				})
			},
			createCanvas(){
				console.log("createCanvas",this.agent.invite_url)
				const ctx = uni.createCanvasContext('firstCanvas', this)
				ctx.drawImage('/static/img/share_bg.png', 0, 0, 310, 356)
				ctx.draw()
				
				ctx.setFillStyle('rgba(255,255,255,1)')//文字颜色：默认黑色
				ctx.setTextAlign('left')
				ctx.setFontSize(16)//设置字体大小，默认10
				ctx.fillText('我在爱点赞赚钱里获得', 83, 64)//绘制文本
				ctx.draw(true)
				
				ctx.setFillStyle('rgba(255,234,177,1)')//文字颜色：默认黑色
				ctx.setTextAlign('left')
				ctx.setFontSize(42)//设置字体大小，默认10
				ctx.fillText('99.99元', 84, 116)//绘制文本
				ctx.draw(true)
				
				ctx.drawImage(this.agent.invite_url, 94, 150, 120, 120)
				ctx.draw(true)
			},
			getauth() {
				let that = this;
				// permision.gotoAppPermissionSetting()
				this.saveImg()
				
		    },
			createImg(){
				let that = this;
				uni.showLoading({
				  title: '',
				  mask: true
				})
				uni.canvasToTempFilePath({
				  destWidth: 610,
				  destHeight: 712,
				  canvasId: 'firstCanvas',
				  success(res) {
					uni.hideLoading()
					that.shareImgSrc = res.tempFilePath
				    console.log(res.tempFilePath)
				  }
				})
			},
			saveImg() {
			    let that = this;
				uni.showLoading({
				  title: '',
				  mask: true
				})
			    uni.canvasToTempFilePath({
			      destWidth: 610,
			      destHeight: 712,
			      canvasId: 'firstCanvas',
			      success(res) {
			        console.log(res.tempFilePath)
			        uni.saveImageToPhotosAlbum({
			          filePath: res.tempFilePath,
			          success(res) {
			            uni.hideLoading()
			            that.toggleShare(false)
			            uni.showToast({
			              title: '保存成功',
			              icon: 'none',
			              duration: 2000
			            })
			          },
			          fail(res) {
			            uni.hideLoading()
			          }
			        })
			      }
			    })
			  }
		}
	}
</script>

<style>
.page_box{
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
}
.ikon1{
	width: 100%;
	height: 272rpx;
/* 	background-size: cover;
	background-image: url(../../static/img/agant2.png); */
}
.ikon1>image{
	width: 100%;
	height: 100%;
}
.ikon2{
	width: 645rpx;
	height: 211rpx;
/* 	background-size: cover;
	background-image: url(../../static/img/agent1.png); */
	margin: 0 auto;
	margin-top: 22rpx;
}
.ikon2>image{
	width: 100%;
	height: 100%;
}
.agant_textarea{
	margin: 0 20rpx;
	background:rgba(238,246,255,1);
	border-radius:10rpx;
	padding: 30rpx;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(49,49,49,1);
	line-height:40rpx;
}
.agant_btn{
	width:400rpx;
	height:80rpx;
	line-height: 80rpx;
	border-radius:10rpx;
	text-align: center;
	font-size:32rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	margin: 0 auto;
	margin-top: 40rpx;
}
.copy_btn{
	background:linear-gradient(0deg,rgba(4,137,255,1),rgba(145,202,255,1));
}
.share_btn{
	background:linear-gradient(0deg,rgba(254,173,3,1),rgba(255,216,122,1));
}
.agant_modal{
	width:100%;
	height:100vh;
	background:rgba(0,0,0,0.8);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
}
.share_bg_box{
	width: 620rpx;
	height: 712rpx;
	margin: 0 auto;
	margin-top: 110rpx;
	position: relative;
	box-sizing: border-box;
	z-index: 99;
}
.share_bg{
	display: block;
	width: 620rpx;
	height: 712rpx;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	/* transform: translate(-50%,-50%); */
}
.share_close{
	display: block;
	width: 62rpx;
	height: 62rpx;
	position: absolute;
	top: -60rpx;
	right: 0;
	z-index: 100;
}
.share_label{
	width: 100%;
	font-size:32rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	line-height:32rpx;
	text-align: center;
	position: absolute;
	top: 128rpx;
}
.share_money{
	width: 100%;
	text-align: center;
	position: absolute;
	top: 190rpx;
	font-family:Source Han Sans SC;
	font-weight:800;
	color:rgba(255,234,177,1);
	vertical-align: bottom;
}
.share_money_num{
	font-size:84rpx;
}
.share_money_count{
	font-size:32rpx;
}
.share_qrcode{
	position: absolute;
	display: block;
	width:240rpx;
	height:240rpx;
	border-radius:10rpx;
	position: absolute;
	top: 200%;
}
.share_list{
	margin-top: 30rpx;
	justify-content: space-around;
}
.share_list_item{
	align-items: center;
}
.share_list_item text{
	font-size:26rpx;
	line-height: 26rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(255,255,255,1);
	padding-top: 8rpx;
}
.share_list_item image{
	width: 102rpx;
	height: 102rpx;
	object-fit: cover;
}
.share_canvas{
	width: 620rpx;
	height: 712rpx;
}
</style>
